<style lang=less scoped>
	@import "../../variables.less";
	@import "../../resource/common.less";

	@currentWidth: 750px;
	@attachWidth: unset;
	.mainContent /deep/ .colOperation .ivu-table-cell div {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
</style>
<template>
	<div>
		<div class="mainContent">
			<div class="head">
				维保单
			</div>
			<Form :label-width=60 :model="form" inline ref="search">
				<FormItem label="时间段">
					<DatePicker @on-change="getEvent(1)" clearable size="small" type="daterange"
						v-model="form.createTimeRange" />
				</FormItem>
				<FormItem label="班组">
					<Select @on-change="getEvent(1)" clearable size="small" style="width:120px" v-model="form.template">
						<Option :key="i.id" :value="i.id" v-for='i in template'>{{i.name}}</Option>
					</Select>
				</FormItem>
				<FormItem label="进度">
					<Select @on-change="getEvent(1)" clearable size="small" v-model="form.status">
						<Option value="1">新建</Option>
						<Option value="2">处理中</Option>
						<Option value="3">已解决</Option>
						<Option value="4">已关闭</Option>
					</Select>
				</FormItem>
			</Form>
			<Table :columns="columns" :data="dataSource" :height="height" :loading="tableLoading" size="small">
				<Loading slot="loading" />
			</Table>
			<Page :current.sync="page" :pageSize="pageSize" :total="total" @on-change="page=>getEvent(page,1)"
				show-total
				simple
				size="small" style="text-align: right;margin-top: 6px" />
		</div>
	</div>
</template>
<script lang=ts>
	import { Component, Watch } from "vue-property-decorator";
	import TableCommon from "@/components/tableCommon/TableCommon";
	import { Button, DatePicker, Form, FormItem, Input, Option, Page, Select, Table, TableColumn } from "view-design";
	import { CreateElement, VNode } from "vue";
	import Loading from "@/components/loading/Loading.vue";
	import request from "@/request";

	const step0 = require("@/assets/dealing.png");
	const step1 = require("@/assets/未开始.png");
	const step2 = require("@/assets/处理中.png");
	const step3 = require("@/assets/已完成.png");
	const step4 = require("@/assets/已关闭.png");

	interface CurrentTableColumn extends Omit<TableColumn, "render"> {
		render?:(
			h:CreateElement,
			params:TableColumnRenderParams
		) => VNode
	}

	declare class TableColumnRenderParams {
		row:any;
		column:any;
		index:number;
	}

	@Component({
		components: {
			Loading,
			DatePicker,
			Page,
			Table,
			Form,
			FormItem,
			Select,
			Option,
			Input,
			Button,
			iButton: Button
		}
	})
	export default class MaintenanceTable extends TableCommon {
		readonly type:number = 1;

		get columns ():CurrentTableColumn[] {
			return [
				{
					title: "楼宇",
					key: "facility",
					width: 60
				},
				{
					title: "名称",
					key: "name"
				},
				{
					title: "开始时间",
					key: "start",
					width: 100
				},
				{
					title: "进度",
					width: 130,
					render (h:CreateElement, params:TableColumnRenderParams):Vue.VNode {
						let src, status;
						const paramsStatus = params.row.status.toString();
						if (params.row.loading) {
							src = step0;
							status = "请稍候";
						} else if (paramsStatus === "1") {
							src = step1;
							status = "新建";
						} else if (paramsStatus === "2") {
							src = step2;
							status = "处理中";
						} else if (paramsStatus === "3") {
							src = step3;
							status = "已解决";
						} else {
							src = step4;
							status = "已关闭";
						}
						return h("div", [ h("img", {
							attrs: { src },
							style: {
								"width": "30px",
								"vertical-align": "middle",
								"margin-right": ".5rem"
							}
						}), h("span", status) ]);
					}
				},
				{
					title: "处理、评价人",
					ellipsis: true,
					tooltip: true,
					key: "related"
				},
				{
					title: "操作",
					width: 100,
					className: "colOperation",
					render: (h:CreateElement, params:TableColumnRenderParams):Vue.VNode => {
						return h(
							"div",
							{},
							[
								h(
									"img",
									{
										attrs: { src: require("@/assets/detail.png") },
										style: {
											cursor: "pointer"
										},
										on: {
											click: () => {
												this.$router.push(`/repair/detail/${ params.row.id }/`);
											}
										}
									}
								),
								(!params.row.loading) && (params.row.guIdList && ((this.$store.state.showType === "room" && params.row.guIdList.roomguid))) ? h(
									"img",
									{
										attrs: { src: require("@/assets/location.png") },
										style: {
											cursor: "pointer",
											width: "25px"
										},
										on: {
											click: () => {
												request({
													url: "/space/room/",
													params: {
														room_guid: params.row.guIdList.roomguid
													}
												}).then(({ data }) => {
													const temp = data.results[ 0 ];
													this.$store.commit("findRoom", {
														floor: temp.floorid,
														id: params.row.guIdList.roomguid,
														path: [ temp.floorfacilityid, temp.floorid, temp.id ]
													});
												});
											}
										}
									}
								) : h("img", { attrs: { width: 25 }, staticStyle: { visibility: "hidden" } }),
								(params.row.loading || (params.row.status.toString() === "4" || !params.row.actionable)) ? h("img", {
									attrs: { width: 25 },
									staticStyle: { visibility: "hidden" }
								}) : h(
									"img",
									{
										attrs: { src: require("@/assets/operation.png") },
										style: {
											cursor: "pointer"
										},
										on: {
											click: () => {
												this.$router.push(`/repair/operation/${ params.row.id }/`);
											}
										}
									}
								)
							]
						);
					}
				}
			];
		};

		mounted ():void {
			this.getEvent(1);
		}

		@Watch("$store.state.floorValue")
		onFloorChange () {
			this.getEvent(1);
		}
	}

</script>
